<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>list files with zTree</title>

    <link rel="stylesheet" href="/webjars/zTree/3.5.28/css/demo.css" type="text/css">
    <link rel="stylesheet" href="/webjars/zTree/3.5.28/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <!--<link rel="stylesheet" href="/webjars/zTree/3.5.28/css/awesomeStyle/awesome.css" type="text/css">-->
    <link rel="stylesheet" href="/webjars/jquery-ui/1.12.1/jquery-ui.min.css" type="text/css">

    <script src="/webjars/jquery/3.2.1/jquery.min.js"></script>
    <script src="/webjars/jquery-ui/1.12.1/jquery-ui.min.js"></script>
    <script src="/webjars/zTree/3.5.28/js/jquery.ztree.all.min.js"></script>
</head>
<body>

<div style="max-height: 500px; overflow-y: auto; overflow-x: auto;">
    <ul id="dir_ztree" class="ztree"></ul>
</div>

<button id="bcm" class="btn btn-primary btn-sm " data-dismiss="modal">
    <i class="ace-icon glyphicon glyphicon-ok"></i>
    确定
</button>

<script type="text/javascript">
    jQuery(document).ready(function () {
        //初始化树
        $.ajax({
            url: "/fs/list?path=",
            cache: false,
            type: "GET",
            dataType: "json",
            success: function (data) {
                buildTree(data);
            }
        });

    });

    //把json数据转成树
    function buildTree(json) {
        var zTreeObj;
        var setting = {
            check: {
                enable: false,
                chkStyle: "radio"
            },
            async: {
                enable: true,
                url: "/fs/list",
                autoParam: ["path", "name"], //url?path=xx&name=xx
                dataFilter: ajaxDataFilter
            },
            data: {
                simpleData: {
                    enable: true //是否使用简单数据格式，即使用默认的id、pid、rootPid，否则需要手动设置
                    // idKey: "id",
                    // pIdKey: "pId",
                    // rootPId: 0
                }
            },
            callback: {
                beforeClick: zTreeBeforeClick,
                onClick: zTreeOnClick
            }
        };
        var zNodes = [];
        var rootNode = {name: "根目录", path: "\\", isParent: true, id: 0, pId: null, open: true};
        zNodes.push(rootNode);

        $(json).each(function (index, treeNode) {
            var zNode = getSimpleDataNode(treeNode, 0);
            zNodes.push(zNode);
        });
        zTreeObj = $.fn.zTree.init($("#dir_ztree"), setting, zNodes);
    }

    // 就是简单的拼凑出一个节点的信息
    function getSimpleDataNode(data, pId) {
        //必须传入json对象
        var path = data['parent'];
        var name = data['name'];
        var isParent = data['isDir'];
        return {
            pId: pId,
            name: name,
            path: path,
            isParent: isParent
        }
    }

    // 对返回的数据进行预处理 - 如果返回的格式ztree无法直接使用的话，需要先转换一下。
    function ajaxDataFilter(treeId, parentNode, data) {
        if (data) {
            var zNodes = [];
            $(data).each(function (index, treeNode) {
                var zNode = getSimpleDataNode(treeNode, parentNode.id); //设置父节点id
                zNodes.push(zNode);
            });
            return zNodes;
        }
    }


    function zTreeBeforeClick(treeId, treeNode, clickFlag) {
        return !treeNode["isParent"];
    };

    /**
     *
     * @param event 标准的 js event 对象
     * @param treeId 对应 zTree 的 treeId，便于用户操控
     * @param treeNode 被点击的节点 JSON 数据对象
     */
    function zTreeOnClick(event, treeId, treeNode) {
        // alert(treeNode.tId + ", " + treeNode.name);
        $.ajax({
            url: "/fs/content",
            data: {path: treeNode.path, name: treeNode.name},
            dataType: "text",
            type: "post",
            success: function (text) {
                var pre = parent.document.getElementById("pre");
                pre.innerText = text;
            }
        })
    };
</script>
</body>
</html>